<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运营数据汇总</title>
    <link href="../../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">
    <link href="../../static/css/vui365.min.css" rel="stylesheet">
</head>

<body>
    <div id="app">
        <div class="p-3">
            <h4 class="ml-1">
                运营数据汇总
                <small style="font-size: 14px; color: #ccc">说明：统计数据每10分钟更新一次</small>
            </h4>
            <div class="d-flex " title="图标模式模式">
                <div class="d-flex flex-fill border m-1 skeleton">
                    <div class="icon p-3 text-white bg-primary">
                        <i class="fa fa-users" style="font-size: 30px"></i>
                    </div>
                    <div class="mx-3 align-self-center">
                        <h6 class="mb-1">总注册</h6>
                        <a href="#" class="card-link" id="zongzc">{{ statData.zongzc }}</a>
                    </div>
                </div>
                <div class="d-flex flex-fill border m-1 skeleton">
                    <div class="icon p-3 text-white bg-success">
                        <i class="fa fa-users" style="font-size: 30px"></i>
                    </div>
                    <div class="mx-3 align-self-center">
                        <h6 class="mb-1">本月注册</h6>
                        <a href="#" class="card-link" id="benyuezc">{{
                            statData.benyuezc
                            }}</a>
                    </div>
                </div>
                <div class="d-flex flex-fill border m-1 skeleton">
                    <div class="icon p-3 text-white bg-info">
                        <i class="fa fa-users" style="font-size: 30px"></i>
                    </div>
                    <div class="mx-3 align-self-center">
                        <h6 class="mb-1">昨日注册</h6>
                        <a href="#" class="card-link" id="zuorizc">{{ statData.zuorizc }}</a>
                    </div>
                </div>
                <div class="d-flex flex-fill border m-1 skeleton">
                    <div class="icon p-3 text-white bg-danger">
                        <i class="fa fa-users" style="font-size: 30px"></i>
                    </div>
                    <div class="mx-3 align-self-center">
                        <h6 class="mb-1">今日新增</h6>
                        <a href="#" class="card-link" id="jinrizc">{{ statData.jinrizc }}</a>
                    </div>
                </div>
            </div>
            <!-- row 1 -->
            <div class="rechargebox d-flex my-3" title="自动填充模式">
                <div class="card text-white bg-primary flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title">累计充值</h5>
                        <p class="card-text">
                            金额：<span id="leijiczje">{{ statData.leijiczje }}</span>
                        </p>
                        <p class="card-text">
                            人数：<span id="leijiczrs">{{ statData.leijiczrs }}</span>
                        </p>
                        <p class="card-text">
                            ARPU：<span id="leijiczarpu">{{ statData.leijiczarpu }}</span>
                        </p>
                    </div>
                </div>
                <div class="card text-white bg-success flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title">本月充值</h5>
                        <p class="card-text">
                            金额：<span id="benyueczje">{{ statData.benyueczje }}</span>
                        </p>
                        <p class="card-text">
                            人数：<span id="benyueczrs">{{ statData.benyueczrs }}</span>
                        </p>
                        <p class="card-text">
                            ARPU：<span id="benyueczarpu">{{ statData.benyueczarpu }}</span>
                        </p>
                    </div>
                </div>
                <div class="card text-white bg-warning flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title">昨日充值</h5>
                        <p class="card-text">
                            金额：<span id="zuoriczje">{{ statData.zuoriczje }}</span>
                        </p>
                        <p class="card-text">
                            人数：<span id="zuoriczrs">{{ statData.zuoriczrs }}</span>
                        </p>
                        <p class="card-text">
                            ARPU：<span id="zuoriczarpu">{{ statData.zuoriczarpu }}</span>
                        </p>
                    </div>
                </div>
                <div class="card text-white bg-info flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title">今日充值</h5>
                        <p class="card-text">
                            金额：<span id="jinriczje">{{ statData.jinriczje }}</span>
                        </p>
                        <p class="card-text">
                            人数：<span id="jinriczrs">{{ statData.jinriczrs }}</span>
                        </p>
                        <p class="card-text">
                            ARPU：<span id="jinriczarpu">{{ statData.jinriczarpu }}</span>
                        </p>
                    </div>
                </div>
            </div>
            <!-- row 2 -->
            <div class="d-flex my-3" title="自动填充模式">
                <div class="card text-white bg-info flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title" id="zuorikh">{{ statData.zuorikh }}</h5>
                        <p class="card-text">昨日开盲盒数</p>
                    </div>
                </div>
                <div class="card text-white bg-danger flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title" id="zuorixh">{{ statData.zuorixh }}</h5>
                        <p class="card-text">昨日消耗</p>
                    </div>
                </div>
                <div class="card text-white bg-success flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title" id="jinrikh">{{ statData.jinrikh }}</h5>
                        <p class="card-text">今日开盲盒数</p>
                    </div>
                </div>
                <div class="card text-white bg-warning flex-fill mx-1 skeleton">
                    <div class="card-body">
                        <h5 class="card-title" id="jinrixh">{{ statData.jinrixh }}</h5>
                        <p class="card-text">今日消耗</p>
                    </div>
                </div>
            </div>
            <!-- row 3 -->
            <div title="图表演示">
                <div>
                    <canvas id="yuefenzctj" width="600" height="100"></canvas>
                </div>
                <div>
                    <canvas id="yuefencztj" width="600" height="100"></canvas>
                </div>
            </div>
        </div>
    </div>
    <script src="../../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../../static/vendor/vue/vue.global.prod.min.js"></script>
    <script src="../../static/vendor/chart.js/chart.min.js"></script>
    <script>
        // 全局配置
        this.vui365 = this.parent.vui365;

        // Api接口配置
        const UrlCfg = {
            main: '/api/admin/main',
        }
        // 应用配置
        const App = {
            data() {
                return {
                    statData: {},
                    yuefenzctjData: [],
                    yuefencztjData: [],
                };
            },
            methods: {
                // 初始化页面数据
                async initData() {
                    const msgInfo = await vui365.stdAxios(UrlCfg.main, {});
                    console.log("msgInfo=", msgInfo);
                    if (msgInfo.status == 0) {
                        vui365.BsDialog.alert(msgInfo.message);
                        return;
                    }
                    this.statData = msgInfo.data.stat_data;
                    this.yuefenzctjData = msgInfo.data.yuefenzctj_data;
                    this.yuefencztjData = msgInfo.data.yuefencztj_data;
                    //   if (false) {
                    //     this.yuefenzctjData = this.getDemoData();
                    //     this.yuefencztjData = this.getDemoData();
                    //   }
                },
                /**
                 * 初始化页面视图
                 */
                initView() {
                    // 移除骨架屏
                    document.querySelectorAll('.skeleton').forEach(el => {
                        el.classList.remove("skeleton");
                    })
                    this.createChart({
                        id: "yuefenzctj",
                        title: "每日用户注册量",
                        labels: Object.keys(this.yuefenzctjData),
                        data: Object.values(this.yuefenzctjData),
                        backgroundColor: Array(31).fill("rgba(54, 162, 235, 0.2)"),
                        borderColor: Array(31).fill("rgba(54, 162, 235, 1)"),
                    });
                    this.createChart({
                        id: "yuefencztj",
                        title: "每日充值金额",
                        labels: Object.keys(this.yuefencztjData),
                        data: Object.values(this.yuefencztjData),
                        backgroundColor: Array(31).fill("rgba(255, 206, 86, 0.2)", 0, 31),
                        borderColor: Array(31).fill("rgba(255, 206, 86, 1)", 0, 31),
                    });
                },
                /**
                 * 创建图表实例
                 */
                createChart(options = {}) {
                    let _default = {
                        id: "myChart",
                        type: "bar",
                        title: "# of Votes",
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        data: [12, 19, 3, 5, 2, 3],
                        backgroundColor: [
                            "rgba(255, 99, 132, 0.2)",
                            "rgba(54, 162, 235, 0.2)",
                            "rgba(255, 206, 86, 0.2)",
                            "rgba(75, 192, 192, 0.2)",
                            "rgba(153, 102, 255, 0.2)",
                            "rgba(255, 159, 64, 0.2)",
                        ],
                        borderColor: [
                            "rgba(255, 99, 132, 1)",
                            "rgba(54, 162, 235, 1)",
                            "rgba(255, 206, 86, 1)",
                            "rgba(75, 192, 192, 1)",
                            "rgba(153, 102, 255, 1)",
                            "rgba(255, 159, 64, 1)",
                        ],
                        borderWidth: 1,
                    };
                    options = Object.assign(_default, options);
                    let el = document.getElementById(options.id);
                    if (!el) {
                        return null;
                    }
                    var ctx = el.getContext("2d");
                    return new Chart(ctx, {
                        type: options.type,
                        data: {
                            labels: options.labels,
                            datasets: [
                                {
                                    label: options.title,
                                    data: options.data,
                                    backgroundColor: options.backgroundColor,
                                    borderColor: options.borderColor,
                                    borderWidth: options.borderWidth,
                                },
                            ],
                        },
                        options: {
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            },
                        },
                    });
                },
            },
            async created() {
                await this.initData();
            },
            // mounted 生命周期
            mounted() {
                this.initView();
            },
        }
        // 创建应用实例
        const app = Vue.createApp(App);
        app.mount('#app');
    </script>
</body>

</html>